<template>
  <view class="my-search-container">
    <!-- 搜索输入框 -->
    <uni-search-bar
      v-if="isShowInput"
      class="my-search-bar"
      :radius="300"
      :bgColor="config.backgroundColor"
      :placeholder="placeholderText"
      :value="value"
      @confirm="onSearch"
      @focus="onFocus"
      @blur="onBlur"
      @clear="onClear"
      @cancel="onCancel"
      @input="onInput"
    >
      <uni-icons slot="clearIcon" type="clear" color="#99999" />
    </uni-search-bar>
    <!-- 搜索按钮 -->
    <view
      class="my-search-box"
      v-else
      :style="{
        height: config.height + 'px',
        backgroundColor: config.backgroundColor,
        border: config.border,
      }"
    >
      <image class="icon" :src="config.icon" />
      <text
        class="placeholder"
        :style="{
          color: config.textColor,
        }"
        >{{ placeholderText }}</text
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "my-search",
  data() {
    return {};
  },
  props: {
    // search-bar 不可以使用v-model 因为直接使用v-model会修改父组件传递过来的数据
    // input 的事件名称不可修改，与 props 中的 value 对应
    // 当同时存在：
    // props -> value
    // $emit('input', val)
    // 时，在组件外可以使用 v-model 完成双向数据绑定。
    // 即：用户输入内容时，父组件传递过来的 value 同步发生变化
    // 详细见 vue 中 v-model 指令：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
    value: {
      type: String,
    },
    isShowInput: {
      type: Boolean,
      default: false,
    },
    // 配置对象
    config: {
      type: Object,
      default: () => ({
        height: 36,
        backgroundColor: "#fff",
        icon: "/static/images/search.png",
        textColor: "#454545",
        border: "1px solid #c9c9c9",
      }),
    },
    placeholderText: {
      type: String,
      default: "搜索",
    },
  },
  methods: {
    /**
     * 点击搜索按钮触发
     */
    onSearch() {
      this.$emit("search", this.value);
    },
    /**
     * 输入框获取焦点触发
     */
    onFocus() {
      this.$emit("focus", this.value);
    },
    /**
     * 输入框失去焦点触发
     */
    onBlur() {
      this.$emit("blur", this.value);
    },
    /**
     * 点击输入框中清空按钮
     */
    onClear() {
      this.$emit("clear", this.value);
    },
    /**
     * 取消按钮触发
     */
    onCancel() {
      this.$emit("cancel", this.value);
    },
    /**
     * value改变时触发
     */
    onInput(value) {
      this.$emit("input", value);
    },
  },
};
</script>

<style lang="scss">
.my-search-container {
  display: flex;
  align-items: center;

  .my-search-bar {
    width: 100%;
  }
  .my-search-box {
    width: 100%;
    height: 36px;
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #c9c9c9;
    display: flex;
    align-items: center;
    padding: 0 10px;
  }
  .icon {
    width: 20px;
    height: 20px;
  }
  .placeholder {
    font-size: 12px;
    margin: 5px;
    color: #999;
  }
}
</style>
